<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义输入框 | 特效源码</title>
    <style>
      html {
        font-size: 14px;
      }

      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .floating-label {
        width: 90%;
        position: relative;
        margin-bottom: 1.5rem;
      }
      .floating-label input {
        width: 100%;
        box-sizing: border-box;
        font-size: 1rem;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        padding: 0.75rem 0.75rem;
        background-color: #fff;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
      }
      .floating-label div {
        position: absolute;
        top: 50%;
        left: 0.75rem;
        font-size: 1rem;
        color: #6c757d;
        width: 5.5rem;
        box-sizing: border-box;
        pointer-events: none;
        transition: all 0.2s ease;
        transform: translateY(-50%);
        background-color: #fff;
        padding: 0 0.25rem;
        z-index: 1;
      }
      .floating-label input:focus {
        border-color: #495057;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
      }
      .floating-label input:focus + div,
      .floating-label input:not(:placeholder-shown) + div {
        top: -0.75rem;
        left: 0.75rem;
        font-size: 0.75rem;
        width: 4.5rem;
        color: #495057;
        background-color: #fff;
        padding: 0 0.25rem;
        transform: translateY(0);
      }
      .floating-label input:not(:placeholder-shown) {
        border-color: #495067;
      }
    </style>
  </head>
  <body>
    <div class="form-group floating-label">
      <input type="text" class="form-control" id="textInput" placeholder="" />
      <div for="textInput">请输入名称</div>
    </div>
  </body>
</html>
